import WebpackLicense from '@components/WebpackLicense';
import PropertyType from '../../../components/PropertyType.tsx';
import { Tabs, Tab } from '@theme';

<WebpackLicense from="https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations" />

# Extends

Used to extend configurations from other files or packages. This allows you to create a base configuration and extend it for different environments or use cases.

- **Type:** `string | string[]`
- **Default:** `undefined`

:::info
This option is only supported in [`@rspack/cli`](/api/cli).

If you are using the JavaScript API or other Rspack-based tools, `extends` will not take effect, use [webpack-merge](/config/#webpack-merge) instead.
:::

## Basic usage

You can extend a configuration from another file by specifying the path to the file in the `extends` property. The path can be absolute or relative to the configuration file:

<Tabs>
  <Tab label="ESM">

```js title="rspack.config.mjs"
export default {
  extends: './base.rspack.config.mjs',
  // Override or add to the base configuration
  output: {
    filename: '[name].bundle.js',
  },
};
```

  </Tab>
  <Tab label="CJS">

```js title="rspack.config.cjs"
module.exports = {
  extends: './base.rspack.config.cjs',
  // Override or add to the base configuration
  output: {
    filename: '[name].bundle.js',
  },
};
```

  </Tab>
</Tabs>

:::tip
When using relative paths, they are resolved relative to the configuration file that contains the `extends` property.
:::

## Multiple configurations

- **Type:** `string[]`
- **Default:** `undefined`

You can extend multiple configurations by providing an array of paths. Configurations are merged from right to left, meaning that the rightmost configuration will be merged into the leftmost one, and so on:

```js title="rspack.config.mjs"
export default {
  extends: ['./base.rspack.config.mjs', './dev.rspack.config.mjs'],
  // Additional configuration options
  plugins: [
    // Add more plugins
  ],
};
```

:::info Merge Behavior

When merging configurations:

- Simple values are overwritten
- Arrays are concatenated
- Objects are deeply merged

:::

## Node modules

- **Type:** `string`
- **Default:** `undefined`

You can also extend configurations from packages installed in your node_modules. The package should export a valid Rspack configuration:

```js title="rspack.config.mjs"
export default {
  extends: 'some-rspack-config-package',
  // Override or add to the package's configuration
};
```

## Nested extends

Configurations can have their own `extends` property, allowing for nested configuration inheritance. The resolution is performed recursively:

```js title="base.rspack.config.mjs"
export default {
  extends: './core.rspack.config.mjs',
  // Base configuration options
};
```

```js title="rspack.config.mjs"
export default {
  extends: './base.rspack.config.mjs',
  // Environment-specific configuration options
};
```
